<template>
  <j-modal
    width="100%"
    title="节点配置"
    fullscreen
    :footer="null"
    :visible="showNodeModal"
    @cancel="handleCancel">
    <!--二级数树结构-->
    <div class="table-operator">
      <a-button type="primary" @click="addNode(null,'add')">新增节点</a-button>
    </div>

    <a-table
      :columns="columns"
      size="middle"
      rowKey="nodeId"
      :pagination="false"
      :dataSource="dataSource"
      :loading="loading"
      :expandedRowKeys="expandedRowKeys"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @expandedRowsChange="handleExpandedRowsChange">

        <span slot="action" slot-scope="text, record">
          <a @click="addNode(record.nodeId,'edit',record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="addNode(record.nodeId,'query',record)">详情</a>
           <a-divider type="vertical"/>
          <template v-if="record.parentNodeId==undefined||record.parentNodeId==null">
            <a @click="addNode(record.nodeId,'add')">添加下级</a>
            <a-divider type="vertical"/>
          </template>
          <a-popconfirm title="确定删除吗?" @confirm="() => deleteNode(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
    </a-table>
    <flow-chart style="margin-top:30px;" :nodes="dataSource"></flow-chart>
    <node-detail-modal v-if="showDetailModal" :type="modalType"
                       :nodeId="nodeId"
                       :workflow-id="workFlowId"
                       :visible.sync="showDetailModal"
                       :default-node-level="defaultNodeLevel"
                       :default-op-type="defaultOpType"
                       :default-back-node-id="defaultBackNodeId"
                       @refresh="loadNodeData"></node-detail-modal>
  </j-modal>
</template>

<script>
  //节点配置
  import {JeecgListMixin} from '@/mixins/JeecgListMixin';
  import NodeDetailModal from "./NodeDetailModal";
  import {getAction} from "../../../api/manage";
  import FlowChart from "../components/FlowChart";

  export default {
    name: "FlowNodeModal",
    components: {FlowChart, NodeDetailModal},
    mixins: [JeecgListMixin],
    props: {
      showNodeModal: {
        type: Boolean,
        required: true,
        default: false
      },
      workFlowId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        disableMixinCreated: true,
        url: {
          list: 'sys/workflowNode/selectTreeParentNodeByWorkflowId'
        },
        showDetailModal: false,
        modalType: '',//add,edit,query
        nodeId: '',
        defaultNodeLevel: null,
        defaultOpType: null,
        defaultBackNodeId: null,
        // 展开的行，受控属性
        expandedRowKeys: [],
        columns: [
          {
            title: '节点名称',
            dataIndex: 'nodeName',
            align: "center",
          },
          {
            title: '下级节点协作关系',
            dataIndex: 'opType',
            align: "center",
            customRender(text) {
              return text ? (text == '0' ? '或关联' : '且关联') : '无'
            }
          },
          {
            title: '回退节点',
            dataIndex: 'backNodeName',
            align: "center",
            customRender(text) {
              return text || '无'
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center"
          }
        ]
      }
    },
    created() {
      this.queryParam.workflowId = this.workFlowId;
      this.loadNodeData()
    },
    methods: {
      handleExpandedRowsChange(expandedRows) {
        this.expandedRowKeys = expandedRows
      },
      loadNodeData() {
        this.loadData();
      },
      handleCancel() {
        this.$emit('update:showNodeModal', false);
      },
      findParentNode(parentNodeId) {
        return this.dataSource.find(item => item.nodeId == parentNodeId)
      },
      //添加节点
      addNode(nodeId, type, record) {
        this.modalType = type;
        this.nodeId = nodeId;
        let parentNodeId = '';
        if (type === 'add') {
          this.defaultNodeLevel = nodeId ? "2" : "1";
          parentNodeId = nodeId;
        } else {
          if (record && record.parentNodeId) {
            this.defaultNodeLevel = "2";
            parentNodeId = record.parentNodeId;
          } else {
            this.defaultNodeLevel = "1";
          }
        }
        if (this.defaultNodeLevel == '2') {
          const parentNode = this.findParentNode(parentNodeId);
          if (parentNode) {
            this.defaultOpType = parentNode.opType;
            this.defaultBackNodeId = parentNode.backNodeId;
          }
        }
        this.showDetailModal = true
      },
      //删除节点
      deleteNode(record) {
        //type 0 一级 1二级
        this.loading = true;
        let type = 0;
        if (record.parentNodeId) {
          type = 1;
        }
        getAction('sys/workflowNode/deleteNode', {type, nodeId: record.nodeId}).then(res => {
          if (res.success) {
            this.$message.success('删除成功');
            this.loadNodeData();
          } else {
            this.$message.error(res.message);
          }
        }).catch(error => console.log(error))
          .finally(() => {
            this.loading = false;
          })
      }
    }
  }
</script>

<style scoped>

</style>
